import style from "./login.module.css";
import React from "react";
import { Form, Input, Button, TextArea ,Toast} from "antd-mobile";
import ParticlesBg from "particles-bg"
import axios from "axios";
import { useNavigate } from "react-router-dom";
let { card, box1, drops } = style;



function Login() {
  const navigate = useNavigate()
  const onFinish = (values) => {
    console.log(values, "v");
    axios.get(`http://localhost:3004/users?username=${values.username}&password=${values.password}`).then((res) => {
      console.log(res.data[0],"token");
      if (res.data.length === 0) {
        Toast.show({
          icon: "fail",
          content: "用户名或密码错误",
        });
      } else {
        localStorage.setItem("token", JSON.stringify(res.data[0]))
        Toast.show({
          icon: "success",
          content: "登陆成功",
        });
        setTimeout(() => {
          navigate("/my");
        }, 2000);
       
      }
    });
  };

  return (
    <div id={box1}>
      <ParticlesBg color="#8b5ab5" num={7} type="circle" bg={true}/>
      <div id={card}>
        <Form
          onFinish={onFinish}
          layout="horizontal"
          footer={
            <Button
              block
              type="submit"
              color="danger"
              size="small"
              style={{
                width: "50%",
                margin: "20px auto",
                border: "2px solid #ffcc01",
                borderRadius: "15px",
              }}
            >
              登录
            </Button>
          }
        >
          <img
            src="https://img2.baidu.com/it/u=2150484546,2652440012&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500"
            alt=""
            style={{ width: "100%" }}
          />
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: "用户名不能为空" }]}
          >
            <Input onChange={console.log} />
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: "密码不能为空" }]}
          >
            <Input type="password" onChange={console.log} />
          </Form.Item>
        </Form>
      </div>
      <div className={drops}>
        <i className={`iconfont icon-chongwu`} />
      </div>
    </div>
  );
}
export default Login